<template>
  <div class="Server">
    <el-card class="Server__card">
      <ul class="Server__list">
        <li class="Server__item" v-for="(item, index) in list" :key="index">
          <span class="Server__item__name">{{item.serviceName}}</span>
          <!-- <span class="Server__item__name__main">主推服务</span> -->
          <div class="Server__item__right">
            <el-dropdown class="Server__item__dropdown" @command="(cmd) => handelCommand(cmd, item.id)">
              <el-button size="mini" round>
                编辑/删除<i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu class="Server__item__dropMenu" slot="dropdown">
                <el-dropdown-item command='edit'>编辑</el-dropdown-item>
                <el-dropdown-item command='delete'>删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span class="Server__item__number">{{`${item.price}/${item.number}${item.unitName}`}}</span>
          </div>
        </li>
      </ul>
      <div class="Server__card__bottom">
        <el-button class="Server__card__bottom__button" @click="addSupplyService" type="text">新增服务<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>
    </el-card>
    <!-- 编辑弹层 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="440px"
      class="Server__dialog"
      center>
      <el-form :model="form" ref="dialogForm" label-width="100px" label-position="left" class="Server__form">
        <el-form-item
          label="服务名称"
          prop="serviceName"
          :rules="[{ required: true, message: '服务名称不能为空'}]">
          <el-input v-model="form.serviceName" placeholder="请输入服务名称"  auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="单位名称"
          prop="unitName"
          :rules="[{ required: true, message: '单位名称不能为空'}]">
          <el-input v-model="form.unitName" placeholder="请输入单位名称" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="数量"
          prop="number"
          :rules="[
            { required: true, message: '数量不能为空'},
            { type: 'number', message: '数量必须为数字值'}
          ]"
        >
          <el-input type="number" v-model.number="form.number" placeholder="请输入数量" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="price"
          :rules="[
            { required: true, message: '价格不能为空'},
            { type: 'number', message: '价格必须为数字值'}
          ]"
        >
          <el-input type="number" v-model.number="form.price" placeholder="请输入价格" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="Server__dialog__footer">
        <el-button type="text" @click="resetForm">取 消</el-button>
        <el-button type="text" style="margin-left:124px;" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getSupplyServiceList
  , addSupplyService
  , updateSupplyService
  , deleteSupplyService
  , getSupplyService} from "~/api/";
  export default {
    async asyncData ({app}) {
      try {
        const res = await getSupplyServiceList(app)
        if (res.code == '0') return {list: res.data.serviceList}
        return {list: [], message: res.message}
      } catch (error) {
        console.error(`获取商户服务列表接口错误，错误信息：${error}`)
      }
    },
    beforeMount() {
      if (this.list.length==0&&this.message) {
        $alert(this.message, '提示', {type: 'error'})
      }
    },
    data() {
      return {
        dialogType: 'edit',
        dialogTitle: '添加服务',
        dialogVisible: false,
        form: {
          serviceName: '',
          unitName: '',
          number: '',
          price: '',
          id: ''
        }
      }
    },
    methods: {
      resetForm() {
        this.$refs['dialogForm'].resetFields()
        this.dialogVisible = false
      },
      async reloadList () {
        const res = await getSupplyServiceList(this)
        if (res.code == '0') return this.list = res.data.serviceList
        console.log(res)
      },
      addSupplyService () {
        this.form.serviceName = ''
        this.form.unitName = ''
        this.form.number = ''
        this.form.price = ''
        this.form.id = ''
        this.dialogType = 'add'
        this.dialogVisible = true
        this.dialogTitle = '添加服务'
        setTimeout(() => {
          this.$refs['dialogForm'].resetFields()
        }, 400);
      },
      async updateSupplyService (id) {
        const res = await getSupplyService(this, id)
        if (res.code != '0')  return this.$alert(res.message, '提示', {type: 'error'})
        const {serviceName, unitName, number, price} = res.data.serviceInfo
        this.form.serviceName = serviceName
        this.form.unitName = unitName
        this.form.number = number
        this.form.price = price
        this.form.id = id
        this.dialogType = 'edit'
        this.dialogTitle = '编辑服务'
        this.dialogVisible = true
      },
      dialogSubmit () {
        this.$refs['dialogForm'].validate(async (valid) => {
          if (!valid) return
          let res
          const {id, serviceName, unitName, number, price} = this.form
          if (this.dialogType == 'add') {
            res = await addSupplyService(this, serviceName, unitName, number, price)
          } else if (this.dialogType = 'edit') {
            res = await updateSupplyService(this, id, serviceName, unitName, number, price)
          }
          if (res.code != '0')  return this.$alert(res.message, '提示', {type: 'error'})
          this.dialogVisible = false
          this.$message.success('操作成功')
          this.reloadList()
        })
      },
      openDialog (type = 'edit') {
        this.dialogTitle = type == 'edit' ? '编辑服务' : '添加服务'
        this.dialogVisible = true
      },
      async deleteSupplyService (id) {
        const res = await deleteSupplyService(this, id)
        if (res.code != '0')  return this.$alert(res.message, '提示', {type: 'error'})
        this.$message.success('操作成功')
        this.reloadList()
      },
      handelCommand(cmd,id) {
        if (cmd == 'edit') {
          this.updateSupplyService(id)
        } else if(cmd == 'delete') {
          this.deleteSupplyService(id)
        }
      }
    }
  }
</script>
<style>
.Server__item__dropMenu {
  width: 100px;
}
</style>

<style lang="scss" scoped>
.Server {
  min-height: 100vh;
  background-color: #f3f3f3;
  padding: 24px;
  &__dialog {
    &__footer {
      .el-button {
        font-size: 18px;
      }
    }
  }
  &__list {
    list-style: none;
    padding: 0;
  }
  &__item {
    height: 85px;
    line-height: 84px;
    border-bottom: 1px solid #e8e6e6;
    &__name {
      font-size: 18px;
      &__main {
        margin-left: 37px;
        font-size: 18px;
        color: #409EFF;
      }
    }
    &__right {
      float: right;
      line-height: 28px;
      padding-top: 28px;
      padding-bottom: 28px;
    }
    &__dropdown {
      margin-right: 10px;
    }
    &__number {
      display: inline-block;
      width: 130px;
      text-align: right;
      font-size: 16px;
      color: #409EFF;
    }
  }
  &__card {
    & /deep/ {
      .el-card__body {
        padding: 0 38px;
      }
    }
    &__bottom {
      height: 84px;
      line-height: 84px;
      &__button {
        font-size: 18px;
      }
    }
  }
}
</style>
